<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://api.feedgraph.com/js/feedgraph.js"></script>
<script src="http://api.feedgraph.com/js/temper.js"></script>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <link href="style.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="songdb.js"></script>

<script>

/* templates */
temper.include("templates/queue.html");
var queueItem = temper.script("queue-item");
var nowPlayingItem = temper.script("now-playing-item");
temper.include("templates/library.html");
var libraryItem = temper.script("library-item");


var currentState = {"Queue":[]};

function readState(entry) {

	var state = entry.Obj;

	currentState = state;

	$("#accordion-container").empty().append($("<div id=accordion></div>"));

	for (var i = 0; i < state.Queue.length; i++) {

		queueItem.append("accordion", state.Queue[i]);

	}
   
	$("#accordion").accordion();

	if (state.NowPlaying) {
		nowPlayingItem.replace("now-playing", state.NowPlaying);
	}
}

function queueSong(uri) {

	var song = songs[uri];
	currentState.Queue.push(song);

	feedgraph.postobj("/jukebox/SomeBar/state", currentState);

	$("#library").hide();
}

function jam(uri) {

	var yes = confirm("pay 10 cents to play this song now?");

	if (!yes) return;


	for (var i = 0; i < currentState.Queue.length; i++) {
		if (currentState.Queue[i].URI == uri) {
			var temp = currentState.Queue[i];
			currentState.Queue.splice(i, 1);
			currentState.NowPlaying = temp;
			break;
		}
	}
	
	feedgraph.postobj("/jukebox/SomeBar/state", currentState);
}

function slam(uri) {

	var yes = confirm("pay 10 cents to move this song to the end of the queue?");

	if (!yes) return;

	for (var i = 0; i < currentState.Queue.length -1; i++) {
		if (currentState.Queue[i].URI == uri) {

			var temp = currentState.Queue[i];
			currentState.Queue.splice(i, 1);
			currentState.Queue.push(temp);
			
			break;
		}
	}
	
	feedgraph.postobj("/jukebox/SomeBar/state", currentState);
}
function init() {

	feedgraph.watch("/jukebox/SomeBar/state", readState, true);


	for (var uri in songs) {

		libraryItem.append("library", songs[uri]);
	}

	$("#library").accordion();
	$("#library").hide();
	$("#find-music").html("find music");

}

function showLibrary() {

	$("#library").show();

	$("body").scrollTop($("body").scrollTop() + 200);
}

</script>
</head>
<body onload=init()>

<div id=now-playing>
		nothing playing now!
	</div>
	<h1>Next Up</h1>
	<div id=accordion-container>
		no songs in the queue!
	</div>
	<button class=find-music id=find-music onclick=showLibrary()>loading music library...</button>
	<div id=library>
	</div>
	
</body>
</html>
